<template>
  <div :class="`bs-card`" style="width: 100%;height: 100%;position: relative;">
    <div :style="{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        boxSizing: 'border-box',
        backgroundColor: customize.backgroundColor,
        border:`${customize.border}px` + ' ' + customize.borderStyle + ' ' + customize.borderColor,}">
      <header :style="{
          color: customize.headerColor,
          padding: '8px 0',
          lineHeight: '16px',
          borderBottom: `${customize.titleBottomLineWidth}px solid ${customize.titleBottomLineColor}`,
          fontSize: '16px',
          boxSizing: 'border-box',
          display: 'flex',
          justifyContent: 'space-between',}">
        <span :style="{
            display: 'inline-block',
            borderLeft: `${customize.titleLineWidth}px solid ${customize.titleLineColor}`,
            paddingLeft: customize.titlePaddingLeft+'px'}">
          {{ config.title }}
        </span>
      </header>
      <div :style="{flex: 1,position: 'relative'}"/>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Card',
  components: {},
  props: {
    // 卡片的属性
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      customClass: {}
    }
  },
  mounted() {
  },
  watch: {},
  computed: {
    customize() {
      return this.config.option.customize
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>

</style>
